<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Op Art Generator and Animator</title>
		<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
		<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
	</head>
	<body>
		<h1>Welcome to Op Art Generator and Animator</h1>
		<br>
		<div class="container" style="display: flex;">
        	<div style="width: 50%;">
            	<img src="{{ url_for('static', filename=graph) }}" width="90%" onclick="showImg()" class="output" />
            	<p>Stripes<p>
        	</div>
        	<div style="flex-grow: 1;">
        		<form action="home" method="post">
					<input type="submit" value="Back to Image Selector" id="home" class="button">
				</form>
				<br>
            	<form action="output" method="post" id="outputForm">
					<span>Transparency(%)</span>
					<input type="range" id="shapeAlpha" name="shapeAlpha_input" min="0" max="100" step="1" value="{{ initShapeAlpha }}" class="slider">
					<input type="number" id="shapeAlphaValue" name="shapeAlpha_input_textbox" min="0" max="100" step="1" value="{{ initShapeAlpha }}" required>
					<br>
					<span>Mode</span>
					<select name="mode_input" id="mode">
  						<option value="png" {% if mode == "png"%} selected {% endif %}>PNG</option>
  						<option value="svg" {% if mode == "svg"%} selected {% endif %}>SVG</option>
					</select>
					<br>
					<br>
					<span>Number of Stripes</span>
					<input type="number" id="stripes" name="stripes_input" min="1" max="1000" step="1" value="{{ initStripes }}" required>
					<br>
					<span>Orientation</span>
					<select name="orientation_input" id="orientation">
  						<option value="V" {% if orientation == "V"%} selected {% endif %}>Vertical</option>
  						<option value="H" {% if orientation == "H"%} selected {% endif %}>Horizontal</option>
					</select>
					<br>
					<br>
					<span>Shape</span>
					<select name="shape_input" id="shape" onchange="showDivs(this)">
  						<option value="normal" {% if shape == "normal"%} selected {% endif %}>Normal</option>
  						<option value="binomial" {% if shape == "binomial"%} selected {% endif %}>Binomial Distribution</option>
  						<option value="quadratic" {% if shape == "quadratic"%} selected {% endif %}>Quadratic Formula</option>
					</select>
					<br>
					<div id="shapeDiv_normal" {% if shape == "normal" %} style="display: block;" {% else %} style="display: none;" {% endif %}>
						<span>Stripe Width</span>
						<input type="number" id="stripew" name="stripew_input" min="1" max="100" step="1" value="{{ initStripew }}" required>
						<br>
						<span>Colour Weights</span>
						<input type="text" id="colourWeights" name="colourWeights_input" value="{{ initColourWeights }}" class="longlongTextBox" required pattern="[0]+\.([0]+[1-9]|[1-9]{1,2}|[1-9][0])( [0]+\.([0]+[1-9]|[1-9]{1,2}|[1-9][0])){4}">
						<br>
						<span style="font-size: 10px">Colour weights for Red, Orange, Blue, White, Black.</span>
						<br>
						<br>
						<span>Adjacent Probability(%)</span>
						<input type="range" id="adjacentProbability" name="adjacentProbability_input" min="0" max="100" step="1" value="{{ initAdjacentProbability }}" class="slider">
						<input type="number" id="adjacentProbabilityValue" name="adjacentProbability_input_textbox" min="0" max="100" step="1" value="{{ initAdjacentProbability }}" required>
						<br>
						<span>Adjacent Numbers</span>
						<input type="text" id="adjacentNums" name="adjacentNums_input" value="{{ initAdjacentNums }}" class="longTextBox" required pattern="[1-9]+[0-9]*( [1-9]+[0-9]*)*">
						<br>
					</div>
					<div id="shapeDiv_binoquad" {% if shape == "binomial" or shape == "quadratic" %} style="display: block;" {% else %} style="display: none;" {% endif %}>
						<span>Gap Width</span>
						<input type="number" id="gap" name="gap_input" min="0" max=50" step="1" value="{{ initGap }}" required>
						<br>
						<span>Maximum Stripe Width</span>
						<input type="number" id="maxWidth" name="maxWidth_input" min="1" max=100" step="1" value="{{ initMaxWidth }}" required>
						<br>
					</div>
					<div id="shapeDiv_binomial" {% if shape == "binomial" %} style="display: block;" {% else %} style="display: none;" {% endif %}>
						<span>Amplitude</span>
						<input type="number" id="amplitude" name="amplitude_input" min="1" max=1000" step="1" value="{{ initAmplitude }}" required>
						<br>
						<span>Take &#x1d432; value with respect to stripe index &#x1d499; increasingly from left to right.</span>
						<br>
						<span>Binomial Distribution, for &#x1d499;&isin;{0, {{initStripes}}}</span>
						<h2>{{formulaBinomialMsg.decode('utf-8')}}</h2>
						<span>The width for each stripe is calculated by scaling &#x1d432; with amplitude, i.e.</span>
						<h2>width = {{initAmplitude}}&#x1d432;</h2>
						<span>(Capped at maximum stripe width {{initMaxWidth}} and underpinned at minimum 1)</span>
					</div>
					<div id="shapeDiv_quadratic" {% if shape == "quadratic" %} style="display: block;" {% else %} style="display: none;" {% endif %}>
						<span>Minimum Stripe Width</span>
						<input type="number" id="minWidth" name="minWidth_input" min="1" max=100" step="1" value="{{ initMinWidth }}" required>
						<br>
						<span>Take &#x1d432; value with respect to stripe index &#x1d499; increasingly from left to right.</span>
						<br>
						<span>Quadratic Formula</span>
						<h2>{{formulaQuadraticMsg.decode('utf-8')}}</h2>
						<span>The width for each stripe is calculated by rounding up &#x1d432;.</span>
					</div>
					<br>
					<input type="submit" value="Generate" class="button">
				</form>
        	</div>
    	</div>
    	<script type="text/javascript">
    		var outputForm = document.getElementById("outputForm");
    		var inputs = outputForm.getElementsByTagName("input");
    		var selects = outputForm.getElementsByTagName("select");

			function checkValidThenSubmit(){
    			if (outputForm.checkValidity()) {
					outputForm.submit();
				} else {
					outputForm.reportValidity();
				}
    		}

			for (let i = 0; i < inputs.length; i++) {
				inputs[i].onchange = function() {
					checkValidThenSubmit();
				}
			}

			for (let i = 0; i < selects.length; i++) {
				selects[i].onchange = function() {
					checkValidThenSubmit();
				}
			}

    		var shapeAlphaSlider = document.getElementById("shapeAlpha");
			var shapeAlphaValue = document.getElementById("shapeAlphaValue");
			shapeAlphaValue.value = shapeAlphaSlider.value; // Display the default slider value

			// Update the current slider value (each time you drag the slider handle)
			shapeAlphaSlider.oninput = function() {
  				shapeAlphaValue.value = this.value;
			}

			// Overrides for loop on top
			shapeAlphaValue.onchange = function() {
            	shapeAlphaSlider.value = this.value;
            	checkValidThenSubmit();
            }

            var adjacentProbabilitySlider = document.getElementById("adjacentProbability");
			var adjacentProbabilityValue = document.getElementById("adjacentProbabilityValue");
			adjacentProbabilityValue.value = adjacentProbabilitySlider.value; // Display the default slider value

			// Update the current slider value (each time you drag the slider handle)
			adjacentProbabilitySlider.oninput = function() {
  				adjacentProbabilityValue.value = this.value;
            }

            // Overrides for loop on top
            adjacentProbabilityValue.onchange = function() {
            	adjacentProbabilitySlider.value = this.value;
            	checkValidThenSubmit();
            }

            function showDivs(element) {
				normalDiv = document.getElementById("shapeDiv_normal");
				binomialDiv = document.getElementById("shapeDiv_binomial");
				quadraticDiv = document.getElementById("shapeDiv_quadratic");
				binoquadDiv = document.getElementById("shapeDiv_binoquad");
				switch (element.value) {
					case "normal":
						normalDiv.style.display = 'block';
						binoquadDiv.style.display = 'none';
						binomialDiv.style.display = 'none';
						quadraticDiv.style.display = 'none';
						break;
					case "binomial":
						normalDiv.style.display = 'none';
						binoquadDiv.style.display = 'block';
						binomialDiv.style.display = 'block';
						quadraticDiv.style.display = 'none';
						break;
					case "quadratic":
						normalDiv.style.display = 'none';
						binoquadDiv.style.display = 'block';
						binomialDiv.style.display = 'none';
						quadraticDiv.style.display = 'block';
						break;
					default:
						normalDiv.style.display = 'none';
						binoquadDiv.style.display = 'none';
						binomialDiv.style.display = 'none';
						quadraticDiv.style.display = 'none';
				}
			}

			var imgSrc = "{{ url_for('static', filename=graph) }}"
			if (imgSrc == "/static/out/output.png" || imgSrc == "/static/out/output.svg") {
				document.querySelector("img.output").style.cursor = "pointer";
			}

			function showImg() {
				if (imgSrc == "/static/out/output.png" || imgSrc == "/static/out/output.svg") {
					window.location.href='{{ url_for("fullScreen") }}';
				}
			}
    	</script>
	</body>
</html>